<template>
  <div>
        <el-form :model="childata" ref="userForm">
       <el-form-item label="订单号:" :label-width="formLabelWidth" prop="mainOrderId">
         <el-input placeholder="订单号" :disabled="true" v-model="childata.mainOrderId"></el-input>
       </el-form-item>
       <el-form-item label="售后类型:" :label-width="formLabelWidth" prop="refundType">
         <el-input placeholder="售后类型" :disabled="true" v-model="this.type[this.childata.refundType]"></el-input>
       </el-form-item>
        <el-form-item label="售后说明:" :label-width="formLabelWidth" prop="remake">
         <el-input placeholder="售后说明" :disabled="true" v-model="childata.remake"></el-input>
       </el-form-item>
        <el-form-item label="原因照片:" :label-width="formLabelWidth" prop="">
            <div v-if="childata.vouchers.length == 0">
         <span style="color: #606266;font-size: 14px;font-weight: 500;" >用户未上传</span>
          </div>
          <div v-for="(item,index) in childata.vouchers" :key="index" v-else style="width:40%; display:inline-block; margin-right:20px;">
         <el-image placeholder="原因照片" :disabled="true" :src="item"
         @click="amplification"
          :preview-src-list="srcList" />
          </div>
          
       </el-form-item>
       <el-form-item label="申请时间:" :label-width="formLabelWidth" prop="applyTime">
         <el-input placeholder="申请时间" :disabled="true" v-model="childata.applyTime"></el-input>
       </el-form-item>
        <el-form-item label="物流单号:" :label-width="formLabelWidth" prop="parcel">
         <el-input placeholder="物流单号" :disabled="true" v-model="childata.parcel"></el-input>
       </el-form-item>
       <div v-for="(item,index) in childata.details" :key="index">
       <el-form-item :label="`售后商品${index+1}:`" :label-width="formLabelWidth">
         <el-input placeholder="售后商品" :disabled="true" v-model="item.commodityTitle"></el-input>
       </el-form-item>
         <el-form-item label="申请原因:" :label-width="formLabelWidth">
         <el-input v-if="item.refundReason != null" :disabled="true" v-model="item.refundReason.desc"></el-input>
         <el-input v-else :disabled="true"></el-input>
       </el-form-item>
           <el-form-item label="商品图片:" :label-width="formLabelWidth">
           <el-image :src="item.commodityMainImages[0]" style="width:50%;"></el-image>
        </el-form-item>
       </div>
      </el-form>
  </div>
</template>

<script>
import employeesConst from "@/constant/employees";

export default {
      props:{
    childata:{
      type: Object,
      require: true
    },
    },
  data () {
    return {
    formLabelWidth:'90px',
        type:{},
        srcList:[]
    }
  },
  created(){
   employeesConst.hierTypedefch.forEach((item) => {
  this.type[item.type] = item.value;
       });
       this.loacthg()
  },
  methods:{
     loacthg(){
      this.srcList = this.childata.vouchers
     },
     amplification(){
            this.srcList = this.childata.vouchers
     }
  }
}
</script>

<style>

</style>